<script setup lang="ts">
import { ref } from 'vue';

// FAQ展开状态
const expandedFaq = ref<number | null>(null);

// FAQ数据
const faqs = [
  {
    question: '什么是CTF比赛？',
    answer: 'CTF（Capture The Flag）是一种网络安全竞赛形式，参赛者需要通过解决各种安全挑战来获取旗帜（Flag）。这些挑战涵盖了Web安全、密码学、逆向工程、取证分析等多个领域，旨在提高参与者的网络安全技能。'
  },
  {
    question: '如何开始参与挑战？',
    answer: '在挑战页面浏览并选择感兴趣的题目，点击后查看题目详情。阅读题目描述和提示，尝试找出Flag并在提交框中输入。Flag通常格式为flag{...}，请确保完全匹配才能得分。'
  },
  {
    question: '积分规则是什么？',
    answer: '每个挑战都有对应的分值，根据题目的难度不同而变化。首次解决某个挑战可以获得全部分数，后续解决者的得分可能会根据时间递减。最终排名根据总积分和已解决的挑战数量综合计算。'
  },
  {
    question: '遇到困难怎么办？',
    answer: '每个挑战都提供了一定的提示，你可以参考这些提示来解决问题。如果仍然遇到困难，可以在社区中与其他参与者交流讨论，但请不要直接分享Flag或完整的解决方案。'
  },
  {
    question: '比赛持续多久？',
    answer: '这是一个持续开放的靶场平台，没有固定的结束时间。你可以随时参与挑战，你的进度和成绩会被保存。我们会定期更新新的挑战题目，保持平台的新鲜感。'
  }
];

// 切换FAQ展开状态
const toggleFaq = (index: number) => {
  expandedFaq.value = expandedFaq.value === index ? null : index;
};

// 联系表单
const contactForm = ref({
  name: '',
  email: '',
  message: ''
});

const formSubmitted = ref(false);

const submitContactForm = () => {
  // 模拟表单提交
  formSubmitted.value = true;
  
  // 重置表单
  setTimeout(() => {
    contactForm.value = {
      name: '',
      email: '',
      message: ''
    };
    formSubmitted.value = false;
  }, 3000);
};
</script>

<template>
  <div class="about-container">
    <h1>关于CTF靶场</h1>
    
    <!-- 关于部分 -->
    <section class="about-section">
      <div class="about-content card">
        <h2>什么是CTF靶场？</h2>
        <p>
          CTF靶场是一个提供网络安全挑战的在线平台，旨在帮助安全爱好者和学习者通过实践来提升自己的安全技能。
          我们提供多样化的挑战题目，涵盖Web安全、密码学、逆向工程、取证分析等多个安全领域。
        </p>
        <p>
          无论你是网络安全的初学者还是有经验的专业人士，都能在这里找到适合自己的挑战，
          通过解决实际问题来提高自己的技术水平。
        </p>
      </div>
    </section>
    
    <!-- 平台特点 -->
    <section class="features-section">
      <h2>平台特点</h2>
      <div class="features-grid">
        <div class="feature-item card">
          <h3>实战演练</h3>
          <p>通过真实的安全挑战来学习和实践，理论结合实际，快速提升技能。</p>
        </div>
        <div class="feature-item card">
          <h3>多样化挑战</h3>
          <p>涵盖Web安全、密码学、逆向工程、取证分析等多个安全领域的挑战题目。</p>
        </div>
        <div class="feature-item card">
          <h3>难度分级</h3>
          <p>题目按照难度分为简单、中等和困难三个等级，适合不同水平的参与者。</p>
        </div>
        <div class="feature-item card">
          <h3>实时排行榜</h3>
          <p>实时更新个人和团队排行榜，激发学习动力，促进良性竞争。</p>
        </div>
      </div>
    </section>
    
    <!-- 比赛规则 -->
    <section class="rules-section">
      <h2>比赛规则</h2>
      <div class="rules-card card">
        <ul class="rules-list">
          <li>参与者需要通过解决挑战来获取Flag，每个Flag对应一定的分值。</li>
          <li>首次解决某个挑战可以获得全部分数，后续解决者的得分可能会递减。</li>
          <li>禁止使用自动化工具进行大规模攻击或破坏平台。</li>
          <li>禁止直接分享Flag或完整的解决方案，可以讨论解题思路和方法。</li>
          <li>参与者应当遵守网络安全法律法规，仅在授权范围内进行操作。</li>
          <li>如有发现平台漏洞，请通过官方渠道报告，我们将给予奖励。</li>
        </ul>
      </div>
    </section>
    
    <!-- 常见问题 -->
    <section class="faq-section">
      <h2>常见问题</h2>
      <div class="faq-container">
        <div 
          v-for="(faq, index) in faqs" 
          :key="index" 
          class="faq-item card"
          :class="{ expanded: expandedFaq === index }"
        >
          <div class="faq-question" @click="toggleFaq(index)">
            <h3>{{ faq.question }}</h3>
            <span class="faq-toggle">{{ expandedFaq === index ? '−' : '+' }}</span>
          </div>
          <div class="faq-answer" v-if="expandedFaq === index">
            <p>{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 联系我们 -->
    <section class="contact-section">
      <h2>联系我们</h2>
      <div class="contact-container card">
        <p>如果你有任何问题、建议或反馈，请通过以下方式联系我们，或填写下面的表单：</p>
        
        <div class="contact-info">
          <p>邮箱：contact@ctf-platform.com</p>
          <p>GitHub：<a href="#" target="_blank">github.com/ctf-platform</a></p>
        </div>
        
        <form @submit.prevent="submitContactForm" class="contact-form" v-if="!formSubmitted">
          <div class="form-group">
            <label for="name">姓名</label>
            <input 
              type="text" 
              id="name" 
              v-model="contactForm.name" 
              required 
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="email">邮箱</label>
            <input 
              type="email" 
              id="email" 
              v-model="contactForm.email" 
              required 
              class="form-input"
            />
          </div>
          <div class="form-group">
            <label for="message">留言</label>
            <textarea 
              id="message" 
              v-model="contactForm.message" 
              required 
              rows="4" 
              class="form-input"
            ></textarea>
          </div>
          <button type="submit" class="submit-btn">提交</button>
        </form>
        
        <div class="form-success" v-if="formSubmitted">
          <p>感谢你的留言！我们会尽快回复你。</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.about-container {
  width: 100%;
}

.about-container h1 {
  color: var(--color-primary);
  margin-bottom: 1.5em;
}

.about-container h2 {
  color: var(--color-primary);
  margin-bottom: 1em;
}

/* 关于部分 */
.about-section {
  margin-bottom: 3em;
}

.about-content {
  padding: 2em;
}

.about-content h2 {
  margin-top: 0;
  margin-bottom: 1em;
  color: var(--color-primary);
}

.about-content p {
  margin-bottom: 1em;
  line-height: 1.6;
  color: var(--color-text-dark);
}

/* 平台特点 */
.features-section {
  margin-bottom: 3em;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5em;
  margin-top: 1.5em;
}

.feature-item {
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.3);
}

.feature-item h3 {
  margin-top: 0;
  margin-bottom: 1em;
  color: var(--color-primary);
}

.feature-item p {
  color: var(--color-text-dark);
}

/* 比赛规则 */
.rules-section {
  margin-bottom: 3em;
}

.rules-card {
  padding: 2em;
}

.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rules-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 1em;
  line-height: 1.6;
  color: var(--color-text-dark);
}

.rules-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

/* 常见问题 */
.faq-section {
  margin-bottom: 3em;
}

.faq-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.faq-item {
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item.expanded {
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.3);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question h3 {
  margin: 0;
  font-size: 1.1em;
  color: var(--color-primary);
}

.faq-toggle {
  font-size: 1.5em;
  font-weight: bold;
  transition: transform 0.3s ease;
  color: var(--color-primary);
}

.faq-item.expanded .faq-toggle {
  transform: rotate(180deg);
}

.faq-answer {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px solid rgba(243, 156, 18, 0.2);
}

.faq-answer p {
  color: var(--color-text-dark);
  margin: 0;
}

/* 联系我们 */
.contact-section {
  margin-bottom: 3em;
}

.contact-container {
  padding: 2em;
}

.contact-container p {
  color: var(--color-text-dark);
}

.contact-info {
  margin: 1.5em 0;
  padding: 1em;
  background-color: var(--color-bg-dark);
  border-radius: 4px;
}

.contact-info p {
  margin: 0.5em 0;
  color: var(--color-text-dark);
}

.contact-info a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: all 0.3s ease;
}

.contact-info a:hover {
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  margin-top: 1.5em;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.form-group label {
  font-weight: 500;
  color: var(--color-primary);
}

.form-input {
  padding: 0.8em;
  background-color: var(--color-bg-dark);
  border: 1px solid rgba(243, 156, 18, 0.3);
  border-radius: 4px;
  color: var(--color-text-dark);
  font-family: inherit;
  font-size: 1em;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

.submit-btn {
  align-self: flex-start;
  padding: 0.8em 2em;
}

.form-success {
  padding: 2em;
  text-align: center;
  background-color: rgba(243, 156, 18, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(243, 156, 18, 0.3);
  margin-top: 1.5em;
}

.form-success p {
  color: var(--color-primary);
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .submit-btn {
    width: 100%;
    align-self: stretch;
  }
}
</style>